<template>
  <div>
    <div class="list">
      <div class="tabBox">
        <div @click="tabClick('0')">
          <p :class="(current === '0' ? 'tabList':'')">开启</p>
        </div>
        <div @click="tabClick('1')">
          <p :class="(current === '1' ? 'tabList':'')">关闭</p>
        </div>
      </div>
      <scroll-view
        class="scroll-wrap no-scroll-bar"
        style="height:calc(100% - 10px)"
        scroll-y
        @scrolltolower="handleLoadMore"
      >
        <div class="shopInfo">
          <div
            class="shopInfoList"
            v-for="(item,index) in shopList"
            :key="index"
          >
            <!-- <i-swipeout i-class="i-swipeout-demo-item" :actions="actions"> -->
            <div class="top">
              <div class="shopInfoLeft">
                <img
                  src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=315640956,365692956&fm=11&gp=0.jpg"
                />
                <span
                  :class="item.state === '0'?'shopStateProceed':'shopStateNoStart'"
                >{{item.state === '0'?'开启中':'已关闭 '}}</span>
              </div>
              <div class="shopInfoMiddle">
                <span>{{item.groupName}}</span>
                <div>
                  <!-- <p>{{item.money}}</p> -->
                  <img src="https://akk.028wkf.cn/kdb-weapp-img/img/ptrs.png" alt />
                  <span>{{item.customerNum}}&nbsp;人拼</span>
                </div>
                <!-- <p>{{item.moneyOriginal}}</p> -->
              </div>
              <div class="shopInfoRight">
                <!-- <span></span>
                <img
                  src="https://akk.028wkf.cn/kdb-weapp-img/img/ptxg.png"
                  alt
                  @click="updateClick(item)"
                >-->
                <p>限购：{{item.goodsNum}}</p>
              </div>
            </div>
            <div class="bottom">
              <div class="bottomLeft" @click="updateClick(item)">
                <img src="https://akk.028wkf.cn/kdb-weapp-img/img/ptxg.png" mode="scaleToFill" alt />
                <!-- <img src="https://akk.028wkf.cn/kdb-weapp-img/icon/yhq_bj.png" mode="scaleToFill" alt> -->
                <span class="updateText">编辑</span>
              </div>
              <div class="bottomRight" @click="removeClick(item)">
                <!-- <img src="https://akk.028wkf.cn/kdb-weapp-img/icon/yhq_sc.png" mode="scaleToFill" alt> -->
                <img src="https://akk.028wkf.cn/kdb-weapp-img/img/ptxg.png" mode="scaleToFill" alt />
                <span class="removeText">删除</span>
              </div>
            </div>
            <!-- </i-swipeout> -->
          </div>
        </div>
        <p v-if="alreadyLastPage" class="end-tip">没有更多了</p>
        <!-- <i-swipeout i-class="i-swipeout-demo-item">
          <div slot="content">
            <i-cell
              i-class="i-cell-padding"
              title="猛虫过江"
              label="侏罗纪世界主题公园及豪华度假村被失控的恐龙们摧毁已有四年"
            ></i-cell>
          </div>
          <div
            slot="button"
            class="i-swipeout-demo-button-group"
            style="background:#2db7f5;width:70px"
          >
            <view class="i-swipeout-demo-button" @click="removeClick">删除</view>
          </div>
        </i-swipeout>-->
      </scroll-view>
    </div>

    <div class="kong"></div>
    <div class="newBooking">
      <button
        class="newBookingClick"
        @click="groupOrderClick"
        type="primary"
        long="true"
      >拼团订单</button>
      <button
        class="newBookingClick"
        @click="newBookingClick"
        type="primary"
        long="true"
      >新建拼团</button>
    </div>
  </div>
</template>

<script>
import {
  GROUP_ORDER_LIST,
  DELETE_GROUP_API,
  FIND_BY_SHOPID_PAGEAPI
} from '@/api'
export default {
  components: {},
  data () {
    return {
      current: '0',
      shopList: [],
      currentPage: 1,
      alreadyLastPage: false,
      actions: [
        {
          name: '删除',
          color: '#fff',
          fontsize: '20',
          width: 100,
          icon: 'close',
          background: '#ed3f14'
        }
      ]
    }
  },
  computed: {
    account () {
      return this.$cookie.get('account')
    }
  },
  onUnload () {
    const vm = this
    vm.$cookie.remove('isGroupUpdata')
  },
  onShow () {
    this._findTool()
    this.init()
    this._getGroupList()
  },
  created () {},
  methods: {
    tabClick (val) {
      this.current = val
      this.init()
      this._getGroupList()
    }, // tab切换
    groupOrderClick () {
      this.$router.push('/pages/home/group/order-list/main')
    }, // 拼团订单
    newBookingClick () {
      const vm = this
      vm.$cookie.set('isGroupUpdata', false)
      vm.$cookie.set('isLink', true)
      vm.$cookie.remove('groupUpdataList')
      vm.$router.push('/pages/home/group/new-group-booking/main')
    }, // 新增拼团
    handleLoadMore () {
      if (!this.alreadyLastPage) {
        this._getGroupList()
      }
    }, // 下拉刷新
    updateClick (item) {
      const vm = this
      vm.$cookie.set('isGroupUpdata', true)
      vm.$cookie.remove('groupUpdataList')
      let itemObj = JSON.stringify(item)
      vm.$router.push(
        '/pages/home/group/new-group-booking/main?itemObj=' + itemObj
      )
    },
    removeClick (item) {
      const vm = this
      vm
        .$dialog('确认删除', '')
        .then(() => {
          vm._removeFunction(item)
        })
        .catch(() => {})
    },
    _removeFunction (item) {
      const vm = this
      DELETE_GROUP_API(item.shopId, item.groupId)
        .then(r => {
          if (r.data.code === '0') {
            vm.$alert('删除成功', '').then(() => {
              vm.init()
              vm._getGroupList()
            })
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    },
    init () {
      this.shopList = []
      this.currentPage = 1
    },
    _getGroupList () {
      const vm = this
      let params = {
        shopId: this.account.shopId
      }
      GROUP_ORDER_LIST(params.shopId, vm.currentPage, 10)
        .then(r => {
          if (r.data.code === '0') {
            let { list, isFirstPage, isLastPage } = r.data.data
            vm.printList(list, isFirstPage, isLastPage)
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    }, // 获取拼团列表
    printList (list, isFirst, isLast) {
      const vm = this
      let arrList = []

      if (isFirst) {
        arrList = list
        if (isLast || !list.length) {
          vm.alreadyLastPage = true
        } else {
          vm.alreadyLastPage = false
          vm.currentPage += 1
        }
      } else if (isLast) {
        arrList.push(...list)
        vm.alreadyLastPage = true
      } else {
        arrList.push(...list)
        vm.alreadyLastPage = false
        vm.currentPage += 1
      }

      if (vm.current === '0') {
        arrList.forEach(_ => {
          if (_.state === '0') {
            vm.shopList.push(_)
          }
        })
      } else {
        arrList.forEach(_ => {
          if (_.state === '1') {
            vm.shopList.push(_)
          }
        })
      }
    },
    _findTool () {
      const vm = this
      FIND_BY_SHOPID_PAGEAPI(vm.account.shopId, 1, 99)
        .then(r => {
          if (r.data.code === '0') {
            let state = 0
            let data = [...r.data.data.list]
            for (let i = 0; i < data.length; i++) {
              if (data[i].marketingType === 'GROUP') {
                state = 1
                break
              } else {
                state = 0
              }
            }
            if (!state) {
              vm
                .$dialog('尚未购买拼团，前往购买', '')
                .then(() => {
                  vm.$router.push(
                    '/pages/shop-management/marketing-buy-tool/main'
                  )
                })
                .catch(() => {
                  vm.$router.go(-1)
                })
            }
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';

.list {
  height: calc(100% - 110px);
  .tabBox {
    height: 30px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: #5c94fc;
    padding-bottom: 5px;
    font-size: 14px;
    color: #a9c4fd;
    div {
      padding: 10px;
      p {
        line-height: 30px;
      }
    }
    .tabList {
      color: #fff;
      border-bottom: 2px solid #fff;
    }
  }
  > .scroll-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    // box-shadow: 0 0 8px lighten(#5c94fc, 20%);
    height: 80px;
    position: relative;
    overflow: hidden;
    transform: translateY(10px);
  }
  .end-tip {
    margin: 0;
    padding: 15px;
    text-align: center;
    color: $gray;
    font-size: 15px;
  }
}

.kong {
  height: 80px;
}
.shopInfo {
  .shopInfoList {
    width: 100%;
    margin-top: 30px;
    .top {
      display: flex;
      .shopInfoLeft {
        width: 70px;
        height: 70px;
        position: relative;
        margin: 0 10px 0 20px;
        img {
          position: absolute;
          bottom: 0;
          width: 70px;
          height: 70px;
          border-radius: 3px;
          z-index: -1;
        }
        span {
          position: absolute;
          bottom: 0;
          z-index: 1;
          display: block;
          color: #fff;
          width: 70px;
          font-size: 12px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          border-bottom-left-radius: 3px;
          border-bottom-right-radius: 3px;
        }
        .shopStateProceed {
          background: #19b911;
        }
        .shopStateNoStart {
          background: #ff942c;
        }
        .shopStateOver {
          background: #666666;
        }
      }
      .shopInfoMiddle {
        // width: 190px;
        width: 160px;
        height: 70px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        span {
          display: block;
          font-size: 12px;
          line-height: 12px;
          color: #000;
          width: 190px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        div {
          display: flex;
          align-items: center;
          margin: 10px 0 0;
          p {
            color: #f23748;
            font-size: 14px;
            line-height: 14px;
            margin-right: 10px;
          }
          img {
            width: 20px;
            height: 20px;
          }
          span {
            width: auto;
            padding: 0 5px;
            font-size: 12px;
            text-align: center;
            line-height: 18px;
            color: #ff942c;
            border: 1px solid #ff942c;
            border-left: 0;
            border-top-right-radius: 3px;
            border-bottom-right-radius: 3px;
          }
        }
        p {
          font-size: 12px;
          line-height: 12px;
          color: #a5a5a5;
        }
      }
      .shopInfoRight {
        width: 100px;
        height: 70px;
        display: flex;
        // flex-direction: column;
        justify-content: flex-start;
        // align-items: flex-end;
        align-items: center;
        // span {
        //   height: 12px;
        //   font-size: 12px;
        //   display: block;
        // }
        // img {
        //   width: 20px;
        //   height: 20px;
        //   margin: 10px 0;
        // }
        p {
          font-size: 12px;
          line-height: 12px;
          color: #7e7e7e;
        }
      }
    }
    .bottom {
      width: 100%;
      height: 50px;
      display: flex;
      align-items: center;
      // background: #9bbbf2;
      .bottomLeft,
      .bottomRight {
        width: 50%;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        span {
          height: 12px;
          font-size: 12px;
          display: block;
          margin-left: 10px;
        }
        img {
          width: 20px;
          height: 20px;
          // margin: 10px 0;
        }
      }
    }
  }
}
.newBooking {
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 1;
  display: flex;
  .newBookingClick {
    width: 50%;
    text-align: center;
    font-size: 14px;
    text-decoration: none;
    height: 44px;
    line-height: 44px;
    border-radius: 0;
    color: #fff;
    background: #508ff9;
  }
}
.i-swipeout-demo-item {
  width: 100%;
  height: 50px;
  .i-swipeout-item {
    transform: translate(-70px, 0);
  }
}
.i-swipeout-demo-button-group {
  width: 70px;
}
.i-swipeout-button-right-group {
  width: 70px;
}
// .i-swipeout-demo-button {
// }
</style>

